<style>
    img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
</style>
<div class="layui-fluid" id="app">
    <div class="layui-row">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>
            <span class="layui-breadcrumb" lay-separator="/">
          <a href="<?php echo $this->createUrl('wfloder/list',array('type'=>'image','pid'=>$parent_floder->id))?>">
              <?php echo $parent_floder->name?></a>
          <a href="<?php echo $this->createUrl('wimage/list',array('pid'=>$sub_floder->id))?>">
              <?php echo $sub_floder->name?></a>
          <a><cite>{{title}}</cite></a>
            </span>
        </legend>
    </fieldset>
    </div>
    <div class="layui-row">
        <img :src="image_src" :alt="title">
    </div>
    <div class="layui-row" style="margin-top: 20px">
        <div class="layui-col-xs2 layui-col-xs-offset4">
            <button class="layui-btn layui-btn-xs layui-btn-disabled" v-if="prev_id == false">上一张</button>
            <button class="layui-btn layui-btn-xs" @click="prev()" v-else>上一张</button>
        </div>
        <div class="layui-col-xs3 layui-col-xs-offset1">
            <button class="layui-btn layui-btn-xs layui-btn-disabled" v-if="next_id == false">下一张</button>
            <button class="layui-btn layui-btn-xs" @click="next()" v-else>下一张</button>
        </div>
    </div>
</div>
<script src="<?php echo Yii::app()->baseUrl?>/static/vue/vue.min.js"></script>
<script src="<?php echo Yii::app()->baseUrl?>/static/common/jquery.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            curr_id:<?php echo $image->id?>,
            image_src:'<?php echo Yii::app()->baseUrl . $image->upload_src ?>',
            title:'<?php echo $image->title?>',
            prev_id:<?php echo $prev_id ? $prev_id : 'false'?>,
            next_id:<?php echo $next_id ? $next_id : 'false'?>
        },
        methods:{
            prev:function () {
                this.img_detail(this.prev_id);
            },
            next:function () {
                this.img_detail(this.next_id);
            },
            img_detail:function (id) {
                var app = this;
                $.get('<?php echo $this->createUrl('wimage/prevNext')?>',{id:id}, function (ret) {
                    if (ret.code == 0) {
                        app.title = ret.data.title;
                        app.image_src = '<?php echo Yii::app()->baseUrl?>'+ret.data.image_src;
                        app.prev_id = ret.data.prev_id;
                        app.next_id = ret.data.next_id;
                    }
                });
            }
        }
    });
    layui.extend({
        admin: '<?php echo Yii::app()->baseUrl?>/static/admin/js/admin'
    });
    layui.use('admin',function () {

    });
</script>